<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css" />
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="/css/strategy.css" />
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/css/dialog.css">
    <script src="/js/plugins/dialog2/js/dialog.min.js"></script>


    <script>
        $(function () {
            var authorId ;
            var user = JSON.parse(sessionStorage.getItem("user"));
            var params = getParams();
            if (params) {
                $.get('/travels/'+params.id,function (data) {
                    authorId = data.author.id;
                    $("#getHref").attr('href',"userProfiles.html?id="+authorId);
                    $('.travels').renderValues(data,{
                        getPersons:function (item, value) {
                            var html="";
                            if (value == 1){
                                html="一个人的旅行";
                            }else if(value = 2){
                                html="和父母";
                            }else if(value = 3){
                                html="和朋友";
                            }else if(value = 4){
                                html="和同事";
                            }else if(value = 5){
                                html="和爱人";
                            }else if(value = 6){
                                html="和其他";
                            }
                            $('#persons').html(html);
                        }
                    });
                    $.get("/travels/"+data.author.id+"/getAmount",function (data) {
                        $('#amount').html(data);
                    });
                    if (user){
                        $.get('/notices', {noticeId: user.id, noticedId: data.author.id}, function (data) {
                            if (!data.result) {
                                $("#followBtn").text('关注');
                            } else {
                                $("#followBtn").text('取消关注');
                            }
                        })
                    }else {
                        $("#followBtn").text('关注');
                    }
                });
            };

            //收藏
            if(user){
                //通过传送用户id和游记id去判断该游记是否已经被收藏,如果被收藏则显示实心的五角星
                $.get('/collectionces/statusId',{userId:user.id, travelId:params.id},function (data) {
                    if (data) {
                        $('#collectBtn').removeClass('fa fa-star-o');
                        $('#collectBtn').addClass('fa fa-star');
                    }
                });
            }
            //关注
            $("#followBtn").click(function () {

                //登录后才能关注
                if (!sessionStorage.getItem("user")) {
                    $(document).dialog({
                        titleShow: '温馨提示',
                        content: '请登录后再操作'
                    });
                    return;
                }

                if (user.id == authorId){
                    $(document).dialog({
                        titleShow: '温馨提示',
                        content: '您不能关注您自己'
                    });
                    return;
                }

                $.get('/notices', {noticeId: user.id, noticedId: authorId}, function (data) {
                    if (!data.result) {
                        $("#followBtn").text('关注');
                        //没查到则添加
                        $.post('/notices', {noticeId: user.id, noticedId: authorId}, function (data) {
                            if (data.success) {
                                $("#followBtn").text('取消关注');
                                //关注加粉丝加一
                                var noticedNum = parseInt($("#noticedNum").text()) + 1;

                                $("#noticedNum").text(noticedNum)
                            } else {
                                $(document).dialog({
                                    titleShow: '温馨提示',
                                    content: '操作失败',
                                    autoClose: 15000
                                });
                            }
                        });
                    } else {
                        $("#followBtn").text('取消关注');
                        //使用Ajax来发送各种请求方法的请求；
                        $.ajax({
                            type: 'post',
                            url: "/notices",
                            data: {'_method': 'DELETE', 'noticeId': user.id, 'noticedId': authorId},
                            async: false,
                            success: function (data) {
                                if (data.success) {
                                    $("#followBtn").text('关注');
                                    //取消关注粉丝减一
                                    var noticedNum = parseInt($("#noticedNum").text()) - 1;
                                    $("#noticedNum").text(noticedNum)
                                } else {
                                    $(document).dialog({
                                        titleShow: '温馨提示',
                                        content: '操作失败',
                                        autoClose: 1500
                                    });
                                }
                            }
                        })
                    }
                });
            })

            $('#collectBtn').click(function () {
                if(user){
                    //通过传送用户id和游记id去判断该游记是否已经被收藏,如果被收藏则显示实心的五角星
                    $.get('/collectionces/statusId',{userId:user.id, travelId:params.id},function (data) {
                        if (data) {
                            $.ajax({
                                type:'put',
                                url:'/collectionces',
                                data:{userId:user.id, travelId:params.id},
                                success:function (data) {
                                    if (data.success) {
                                        $('#collectBtn').removeClass('fa fa-star');
                                        $('#collectBtn').addClass('fa fa-star-o');
                                    }
                                }
                            })
                        }else{
                            $.ajax({
                                type:'post',
                                url:'/collectionces',
                                data:{userId:user.id, travelId:params.id},
                                success:function (data) {
                                    if (data.success) {
                                        $('#collectBtn').removeClass('fa fa-star-o');
                                        $('#collectBtn').addClass('fa fa-star');
                                    }
                                }
                            })
                        }
                    });
                }
            })

            //点赞
            if(user){
                //通过传送用户id和游记id去判断该游记是否已经被收藏,如果被收藏则显示实心的五角星
                $.get('/clicks/statusId',{userId:user.id, travelId:params.id},function (data) {
                    console.log(data);
                    if (data) {
                        $('#likeBtn').removeClass('fa fa-thumbs-o-up');
                        $('#likeBtn').addClass('fa fa-thumbs-up');
                    }
                });
            }

            $('#likeBtn').click(function () {
                if(user){
                    //通过传送用户id和游记id去判断该游记是否已经被收藏,如果被收藏则显示实心的五角星
                    $.get('/clicks/statusId',{userId:user.id, travelId:params.id},function (data) {
                        if (data) {
                            $.ajax({
                                type:'put',
                                url:'/clicks',
                                data:{userId:user.id, travelId:params.id},
                                success:function (data) {
                                    if (data.success) {
                                        $('#likeBtn').removeClass('fa fa-thumbs-up');
                                        $('#likeBtn').addClass('fa fa-thumbs-o-up');
                                    }
                                }
                            })
                        }else{
                            $.ajax({
                                type:'post',
                                url:'/clicks',
                                data:{userId:user.id, travelId:params.id},
                                success:function (data) {
                                    if (data.success) {
                                        $('#likeBtn').removeClass('fa fa-thumbs-o-up');
                                        $('#likeBtn').addClass('fa fa-thumbs-up');
                                    }
                                }
                            })
                        }
                    });
                }
            })
            $.get("/travelComments/travel/"+params.id,function (data) {
                console.log(data);
                $('#comment').renderValues(data, {
                    getImgs:function (item, value) {
                        var imgs = value.split(";");
                        console.log(imgs);
                        var temp = '';
                        for (var i = 0; i < imgs.length - 1; i++) {
                            temp += '<li><img src=' + imgs[i] + '></li>';
                        }
                        $(item).html(temp);
                    }
                },{
                    getHref:function (item, value) {
                        var href = $(item).data('href');
                        $(item).attr('href',href+value);
                    }
                });
                //跳转至游记详情
                $('.comment-right').click(function () {
                    var travelId = $(this).attr('travelId');
                    console.log(travelId);
                    location.href="/travelContent.html?id="+travelId;
                });
            });
            $("#commentBtn").click(function () {
                window.location.href = "/mine/addTravelComment.html?id="+params.id;
            });

        });
    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.back();">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img  class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title" ></h6>
        <small>
            <span render-html="lastUpdateTime"></span>
            浏览 <span> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <a id="getHref">
                <img  class="rounded-circle" render-src="author.headImgUrl">
                </a>
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn"> </button>
                    <br>
                    <span id="amount">0 </span>篇游记
                    <span render-html="author.fans" id="noticedNum"> </span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span id="persons" render-key="person" render-fun="getPersons"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content"></div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i  class="fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>
</div>
    <div id="comment">
        <div render-loop="result">
            <div class="container row comment">
                <div class="col-2 comment-head">
                    <a data-href="/userProfiles.html?id=" render-key="result.user.id" render-fun="getHref">
                        <img class="rounded-circle" render-src="result.user.headImgUrl" >
                    </a>
                </div>
                <div class="col comment-right" render-attr="travelId=result.travel_id">

                    <p class="authorName"><span render-html="result.user.nickName"></span></p>
                    <span class="date" render-html="result.createTime"></span>
                    </span>
                    <div class="comment-content">
                        <a href="#">
                            <p render-html="result.content"></p>
                        </a>
                    </div>

                    <ul class="comment-img" render-key="result.imgUrls" render-fun="getImgs">
                        <li>

                        </li>
                    </ul>
                    <hr/>
                </div>
            </div>
        </div>
    </div>


</body>

</html>